<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { staffDetail, staffCreateCom, staffSignBoot, gtcy } from "@/http/api";
import * as echarts from "echarts";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "签约船员", id: 2 },
        { name: "合作企业", id: 3 },
        { name: "他沟通过的船员", id: 4 },
      ],
      stepId: 1,
      tableData: [],
      queryData: {
        staff_id: this.$route.query.id,
        page: 1,
        per_page: 20,
      },
      total: 0,
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    comDetail(row) {
      this.$router.push({
        path: "/cooperationBooterDetail",
        query: { id: row.c_enterprise_id },
      });
    },
    signDetal(row) {
      this.$router.push({
        path: "/bootSignDetail",
        query: { id: row.qy_biographical_notes_id },
      });
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId == 2) {
        this.staffSignBootFn();
      } else if (this.stepId == 3) {
        this.staffCreateComFn();
      } else if (this.stepId == 4) {
        this.gtcyFn();
      }
    },
    async staffSignBootFn() {
      const { data } = await staffSignBoot(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async gtcyFn() {
      const { data } = await gtcy(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async staffCreateComFn() {
      const { data } = await staffCreateCom(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    initDay(arr) {
      let chart = echarts.init(this.$refs.chartDay);
      let option = {
        title: {
          text: "今日统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "auto",
        },
        series: [
          {
            name: "今日统计",
            type: "pie",
            radius: "50%",
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    initMouth(arr) {
      let chart = echarts.init(this.$refs.chartMouth);
      let option = {
        title: {
          text: "本月统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "auto",
        },
        series: [
          {
            name: "本月统计",
            type: "pie",
            radius: "50%",
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    initAll(arr) {
      let chart = echarts.init(this.$refs.chartAll);
      let option = {
        title: {
          text: "累计统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "auto",
        },
        series: [
          {
            name: "累计统计",
            type: "pie",
            radius: "50%",
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    getData() {
      staffDetail({ staff_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          let dayData = res.data.data.today_tj;
          let dayArr = [
            { value: dayData.jl, name: "简历" },
            { value: dayData.gt, name: "沟通" },
            { value: dayData.jy, name: "签约" },
            { value: dayData.lz, name: "离职" },
            { value: dayData.hz, name: "合作" },
          ];
          let monthData = res.data.data.month_tj;
          let monthArr = [
            { value: monthData.jl, name: "简历" },
            { value: monthData.gt, name: "沟通" },
            { value: monthData.jy, name: "签约" },
            { value: monthData.lz, name: "离职" },
            { value: monthData.hz, name: "合作" },
          ];
          let allData = res.data.data.accumulate_tj;
          let allArr = [
            { value: allData.jl, name: "简历" },
            { value: allData.gt, name: "沟通" },
            { value: allData.jy, name: "签约" },
            { value: allData.lz, name: "离职" },
            { value: allData.hz, name: "合作" },
          ];
          this.initDay(dayArr);
          this.initMouth(monthArr);
          this.initAll(allArr);
        }
      });
    },
    backFn() {
      this.$router.back();
    },
    linkFn(url, id, navId) {
      if (id == 0) {
        return false;
      }
      this.$router.push({ path: url, query: { id: id, navId: navId } });
    },
  },
  mounted() {
    // if (this.$route.query.navId) {
    //   this.stepId = this.$route.query.navId;
    //   this.serchFn();
    // }
    this.getData();
  },
  created() {},
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>员工详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId == item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">员工姓名</div>
                  <div class="desText">{{ formData.staff_user_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">员工性别</div>
                  <div class="desText">
                    {{ formData.staff_sex == 1 ? "男" : "女" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">账号状态</div>
                  <div class="desText">
                    <el-tag type="success" v-if="formData.staff_status == 1"
                      >正常</el-tag
                    >
                    <el-tag type="danger" v-if="formData.staff_status == 2"
                      >禁用</el-tag
                    >
                    <el-tag type="info" v-if="formData.staff_status == 3"
                      >已到期</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.staff_user_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">身份证号</div>
                  <div class="desText">{{ formData.staff_idcard }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">入职时间</div>
                  <div class="desText">{{ formData.staff_entry_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">到期时间</div>
                  <div class="desText">{{ formData.expiration_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">最近登录</div>
                  <div class="desText">{{ formData.lastlogin_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem" v-if="formData.staff_remark">
                  <div class="desName">备注信息</div>
                  <div class="desText">{{ formData.staff_remark }}</div>
                </div>
              </div>
            </div>
            <div class="formDes">
              <div class="desTitle">操作统计</div>
              <div class="desCont">
                <div class="chartItem">
                  <div class="cahrtDom" ref="chartDay" id="chartDay"></div>
                </div>
                <div class="chartItem">
                  <div class="cahrtDom" ref="chartMouth" id="chartMouth"></div>
                </div>
                <div class="chartItem">
                  <div class="cahrtDom" ref="chartAll" id="chartAll"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">签约船员({{ total }})</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="cy_sign_number"
                  show-overflow-tooltip
                  label="签约单号"
                />
                <el-table-column
                  prop="qy_real_name"
                  width="120"
                  show-overflow-tooltip
                  label="签约船员"
                />
                <el-table-column width="120" label="签约状态">
                  <template #default="{ row }">
                    <el-tag v-if="row.sh_status == 1">待审核</el-tag>
                    <el-tag type="success" v-if="row.sh_status == 2"
                      >成功</el-tag
                    >
                    <el-tag type="danger" v-if="row.sh_status == 3"
                      >失败</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qy_enterprise_name"
                  show-overflow-tooltip
                  label="船东名称"
                >
                  <template #default="{ row }">
                    <div
                      class="linkText_"
                      @click="linkFn('/cooperationBooterDetail', row.id)"
                    >
                      {{ row.qy_enterprise_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="签约时间"
                />
                <el-table-column prop="Name" width="80" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div class="blueText ctrlText" @click="signDetal(row)">
                        详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">合作企业({{ total }})</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="c_enterprise_name"
                  show-overflow-tooltip
                  width="250"
                  label="合作企业"
                />
                <el-table-column
                  prop="c_enterprise_person"
                  show-overflow-tooltip
                  width="140"
                  label="负责人"
                />
                <el-table-column
                  prop="c_enterprise_mobile"
                  width="180"
                  show-overflow-tooltip
                  label="手机号"
                />
                <el-table-column
                  prop="ljqy"
                  show-overflow-tooltip
                  label="累计签约"
                >
                  <template #default="{ row }">{{ row.ljqy }}（人）</template>
                </el-table-column>
                <el-table-column label="企业状态">
                  <template #default="{ row }">
                    <el-tag v-if="row.c_enterprise_status == 1">待审核</el-tag>
                    <el-tag type="success" v-if="row.c_enterprise_status == 2"
                      >正常</el-tag
                    >
                    <el-tag type="danger" v-if="row.c_enterprise_status == 3"
                      >驳回</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  width="200"
                  label="创建时间"
                />
                <el-table-column prop="Name" width="80" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div class="blueText ctrlText" @click="comDetail(row)">
                        详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 4">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>他沟通过的船员记录（{{ total }}）</div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="沟通时间"
                />
                <el-table-column
                  prop="staff_name"
                  show-overflow-tooltip
                  label="沟通船员"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.biographical_notes_id == 0 ? '' : 'linkText_'"
                      @click="
                        linkFn('salaPublicDetail', row.biographical_notes_id)
                      "
                    >
                      {{ row.real_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="connect_remark"
                  show-overflow-tooltip
                  label="沟通备注"
                />
                <el-table-column
                  prop="connect_label"
                  show-overflow-tooltip
                  label="沟通标签"
                />
                <el-table-column
                  prop="last_connect_time"
                  show-overflow-tooltip
                  label="下次沟通时间提醒"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
